<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>元素周期表滚筒</title>
	<style>
		body{
			perspective: 1000px;
			background-color: #ddd;
		}
		.warp{
			width: 500px;
			/*border: 2px solid #000;*/
			margin-left: 100px;
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;
			transform-style: preserve-3d;

			-webkit-transition: all 30s ;
			-o-transition: all 30s ;
			transition: all 30s ;
		}
		.warp:hover{
			-webkit-transform: rotateY(3000deg);
			-ms-transform: rotateY(3000deg);
			-o-transform: rotateY(3000deg);
			transform: rotateY(3000deg);
		}
		.all{
			width: 100px;
			height: 150px;
			position: relative;
			/*border: 1px solid red;*/
			margin:100px auto;

			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;
			transform-style: preserve-3d;

			-webkit-transform: rotateX(-30deg);
			-ms-transform: rotateX(-30deg);
			-o-transform: rotateX(-30deg);
			transform: rotateX(-30deg);
		}
		.all div{
			width: 100px;
			height: 150px;
			position: absolute;
			left: 0;
			top: 0;
			font-size: 80px;
			text-align: center;
			line-height: 150px;
			border:1px solid black;
			background-color: blue;
			opacity: 0.6;
			box-shadow: 0 0 5px  10px purple;
		}
		.all div:nth-child(1){
			-webkit-transform: rotateY(0deg) translateZ(250px) translateY(0px);
			-ms-transform: rotateY(0deg) translateZ(250px) translateY(0px);
			-o-transform: rotateY(0deg) translateZ(250px) translateY(0px);
			transform: rotateY(0deg) translateZ(250px) translateY(0px);
		}
		.all div:nth-child(2){
			-webkit-transform: rotateY(30deg) translateZ(250px) translateY(15px);
			-ms-transform: rotateY(30deg) translateZ(250px) translateY(15px);
			-o-transform: rotateY(30deg) translateZ(250px) translateY(15px);
			transform: rotateY(30deg) translateZ(250px) translateY(15px);
		}
		.all div:nth-child(3){
			-webkit-transform: rotateY(60deg) translateZ(250px) translateY(30px);
			-ms-transform: rotateY(60deg) translateZ(250px) translateY(30px);
			-o-transform: rotateY(60deg) translateZ(250px) translateY(30px);
			transform: rotateY(60deg) translateZ(250px) translateY(30px);
		}
		.all div:nth-child(4){
			-webkit-transform: rotateY(90deg) translateZ(250px) translateY(45px);
			-ms-transform: rotateY(90deg) translateZ(250px) translateY(45px);
			-o-transform: rotateY(90deg) translateZ(250px) translateY(45px);
			transform: rotateY(90deg) translateZ(250px) translateY(45px);
		}
		.all div:nth-child(5){
			-webkit-transform: rotateY(120deg) translateZ(250px) translateY(60px);
			-ms-transform: rotateY(120deg) translateZ(250px) translateY(60px);
			-o-transform: rotateY(120deg) translateZ(250px) translateY(60px);
			transform: rotateY(120deg) translateZ(250px) translateY(60px);
		}

		.all div:nth-child(6){
			-webkit-transform: rotateY(150deg) translateZ(250px) translateY(75px);
			-ms-transform: rotateY(150deg) translateZ(250px) translateY(75px);
			-o-transform: rotateY(150deg) translateZ(250px) translateY(75px);
			transform: rotateY(150deg) translateZ(250px) translateY(75px);
		}
		.all div:nth-child(7){
			-webkit-transform: rotateY(180deg) translateZ(250px) translateY(90px);
			-ms-transform: rotateY(180deg) translateZ(250px) translateY(90px);
			-o-transform: rotateY(180deg) translateZ(250px) translateY(90px);
			transform: rotateY(180deg) translateZ(250px) translateY(90px);
		}
		.all div:nth-child(8){
			-webkit-transform: rotateY(210deg) translateZ(250px) translateY(105px);
			-ms-transform: rotateY(210deg) translateZ(250px) translateY(105px);
			-o-transform: rotateY(210deg) translateZ(250px) translateY(105px);
			transform: rotateY(210deg) translateZ(250px) translateY(105px);
		}
		.all div:nth-child(9){
			-webkit-transform: rotateY(240deg) translateZ(250px) translateY(120px);
			-ms-transform: rotateY(240deg) translateZ(250px) translateY(120px);
			-o-transform: rotateY(240deg) translateZ(250px) translateY(120px);
			transform: rotateY(240deg) translateZ(250px) translateY(120px);
		}
		.all div:nth-child(10){
			-webkit-transform: rotateY(270deg) translateZ(250px) translateY(135px);
			-ms-transform: rotateY(270deg) translateZ(250px) translateY(135px);
			-o-transform: rotateY(270deg) translateZ(250px) translateY(135px);
			transform: rotateY(270deg) translateZ(250px) translateY(135px);
		}
		.all div:nth-child(11){
			-webkit-transform: rotateY(300deg) translateZ(250px) translateY(150px);
			-ms-transform: rotateY(300deg) translateZ(250px) translateY(150px);
			-o-transform: rotateY(300deg) translateZ(250px) translateY(150px);
			transform: rotateY(300deg) translateZ(250px) translateY(150px);
		}
		.all div:nth-child(12){
			-webkit-transform: rotateY(330deg) translateZ(250px) translateY(165px);
			-ms-transform: rotateY(330deg) translateZ(250px) translateY(165px);
			-o-transform: rotateY(330deg) translateZ(250px) translateY(165px);
			transform: rotateY(330deg) translateZ(250px) translateY(165px);
		}
		img{
			width: 100px;
			height: 150px;
		}
	</style>
</head>
<body>
	<div class="warp">
		<div class="all">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
</body>
</html>